<template>
  <div id="main">
    <!-- 头部区域 -->
    <div class="header">
      <span @click="$router.back(-1)">
        <van-icon name="arrow-left" />
      </span>
      <h2>修改昵称</h2>
    </div>
    <!-- 个人账号修改 -->
    <div class="account">
      <!-- <p>用户名：</p> -->
      <van-field
        v-model="value"
        name="昵称"
        label="昵称:"
        placeholder="请输入新的昵称"
        :rules="[{ required: true, message: '修改不能为空' }]"
      />
      <van-cell-group>
        <van-field v-model="value" :placeholder="msg" />
      </van-cell-group>
      <p>以英文字母或汉字开头，限4-16个字符，一个汉字为2个字符</p>
      <van-button type="default" size="large" color="#f7d247" @click="onSureUpdata"
        >确认修改</van-button
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "",
      value: "",
    };
  },
  created() {
    if (this.msg == "") {
      this.msg = this.User.nick;
    }
    if (1 !== 2) {
      this.msg = this.User.nick;
    } else {
      this.User.nick = this.value;
      this.msg = this.User.nick;
    }
  },
  computed: {
    User() {
      return this.$store.getters.getUser;
    },
  },
  methods: {
    onSureUpdata() {
      let resultInfo = this.$store.getters.getUser;
      let updateUser = {
        username: resultInfo.username,
        headerimg: resultInfo.headerimg,
        nick: this.value,
        id: resultInfo.id,
        visittime: resultInfo.visittime,
      };
      this.$store.dispatch("updateUser", updateUser);
    },
  },
};
</script>
<style lang="scss" scoped>
#main {
  width: 96%;
  margin: 0 auto;
  position: relative;

  // header
  .header {
    height: 50px;
    background: white;
    border-bottom: 10px;

    h2 {
      text-align: center;
    }

    .van-icon {
      position: absolute;
      left: 5px;
      top: 8px;
    }
  }

  // 个人信息和安全
  .account {
    margin-bottom: 20px;

    .van-cell,
    .van-button {
      margin-bottom: 10px;
    }
  }
}
</style>
